#article_details{
    min-height:500px;
    /*background-color: red;*/
    display: flex;
    flex-direction:column;
    background-color: white;
    padding: 40px;
}

#article_header{
    height:200px;
    /*background-color: blue;*/
    display: flex;
}
#article_avatar{
    width: 200px;
    height: 200px;
    /*background-color: aqua;*/
}

#article_info{
    flex:1;
    /*background-color: beige;*/
    margin-left: 20px;
    display: flex;
    flex-direction:column;
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid grey;
    border-top: 1px solid grey;
}

#article_title{
    padding: 20px 0px;
    /*background-color: green;*/
}

.article_func{
    flex:1;
    /*background-color: cadetblue;*/
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.button_40{
    margin-left: 20px;
    height: 40px;
    /*width: 80px;*/
    background-color: #259d8e;
    /*display: flex;*/
    position: relative;
}

.button_40 img{
    margin: 5px ;
    /*height:80%;*/
}

.information_function:hover .information_details {
    visibility: visible;
    top: 40px;
    opacity: 0.95;
}
.information_details{
    min-width: 400px;
    position: absolute;
    right: 0px;
    background-color: #00727c;
    top: 40px;
    /*display: none;*/
    margin:auto;
    display: flex;
    flex-direction:column;
    color: #f8f8f8;
    padding: 20px;
    visibility: hidden;
    
    /*animation*/
    transition-property:all;
    transition-duration:0.2s;
    transition-delay:0s;

    /* Safari */
    -webkit-transition-property:all; 
    -webkit-transition-duration:0.2s;
    -webkit-transition-delay:0s;
    
    top: 60px;
    visibility: hidden;
    opacity: 0;
    
}
.information_details .information_other{
    flex:1;
}
.information_other .information_title{
    padding-right: 20px;
}
.information_details >*{
    padding: 10px;
}

.analysis_view, .analysis_feedback, .analysis_creative{
    display: flex;
    flex:1;
    flex-direction:column;

}

.article_analysis{
    display: flex;

}

.information_other{
    display: flex;
}

#article_content{
    /*flex:1;*/
    /*background-color: green;*/
    margin-top: 60px;
    display: flex;
    flex-direction:column;
    /*padding: 0px 40px;*/
}

#article_content >div:nth-child(1){
    display: inline-flex;
    flex-direction: column;
    margin: auto;
}

#short_intro{
    /*min-height: 200px;*/
    /*background-color: red;*/
    /*display: flex;*/
    /*float: right;*/
    padding: 20px 0px 0px;
    font-weight: bold;
}

#article_image{
    margin: auto;
    height:400px;
    width: 600px;
    /*background-color: cornsilk;*/
}

#article_intro{
    flex:1;
    margin-left: 20px;
    /*background-color: chartreuse;*/
}

#full_article{
    /*flex:1;*/
    /*background-color: blue;*/
    /*margin-top: 20px;*/
}

.rate_bar{
    margin: auto 0px auto auto;
}

.level_rate{
    /*margin-top: 40px;*/
    height:40px;
    width: 40px;
    background-color: #0ec1ad;
    float:left;
    margin-left: 20px;
}

.level_rate:first-child{
    margin-left: 0px;
}

.level_rated{
    background-color: #259d8e;
}

.comment_level{
    margin: 40px 0px;
    height: auto;
    /*background-color: red;*/
}

.comment_block{
    width: 800px;
    margin: auto;
    /*display: flex;*/
    flex-direction:column;
    background-color: white;
}
.comment_nav{
    width: 70%;
    height:40px;
    margin: 0px auto;
    /*margin: 0px 20px;*/
    /*background-color: blue;*/
    display: flex;
}

.comment_field{
    flex:1;
    padding: 5px 10px;
    background-color: #259d8e;
    margin: 0px 2px;
    font-size: 90%;
    display: flex;
    color: #f8f8f8;
}

.comment_field span{
    margin:auto;
    align-self:center;
}
.comment_field img{
    margin: auto 0px;
    align-self:center;
}

/*-------------comment_body_details-----------*/
.comment_body_details{
    min-height: 500px;
    /*flex:1;*/
    padding: 20px;
    /*width: 100%;*/

    /*display: flex;*/
    flex-direction:column;
}

.comment_body_details .comment_header{
    /*margin-top: 20px;*/
    height: 150px;
    /*background-color: crimson;*/
    display: flex;
}

.comment_body_details .comment_owner{
    width: 150px;
    /*background-color: coral;*/
}

.comment_body_details .comment_info{
    flex:1;
    /*background-color: darkolivegreen;*/
    display: flex;
    flex-direction:column;
}

.comment_body_details .comment_details{
    flex:1;
    /*background-color: threedlightshadow;*/
    display: flex;
}
.comment_body_details .comment_details >*{
    flex:1;
    /*background-color: threedlightshadow;*/
    display: flex;
}

.comment_body_details .owner_name{
    /*background-color: threedshadow;*/
    margin-left: 20px;
}

.comment_body_details .comment_func{
    /*background-color: window;*/
    flex:1;
}

.comment_body_details .comment_rate{
    flex:1;
    /*background-color: violet;*/
    align-items:center;
}
.comment_body_details .comment_content{
    flex:1;
    /*background-color: darkgray;*/
}

.comment_body_details .comment_content img{
    padding: 20px;
}


.comment_body_details .comment_rate .rate_bar .level_rate{
    height: 30px;
    width: 30px;
    float:left;
    margin-left: 10px;

}

.comment_body_details .comment_rate .rate_bar .level_rate:first-child{
    margin-left: 0px;
}

/*
 <div class="comment_body_details">
            <div class="comment_header">
                <div class="comment_owner">
                    <img src="<?php echo Yii::app()->baseUrl; ?>/images/People_demo.jpg">
                </div>
                <div class="comment_info">
                    <div class="comment_details">
                        <h4 class="owner_name">Adamson Kenisa</h4>
                        <div class="article_func">
                            <div class="information_function button_40">
                                <img class="icon_32" src="<?php echo Yii::app()->baseUrl; ?>/images/Icons/info-light.png">
                                <div class="information_details">

                                </div>
                            </div>
                            <div class="comment_function button_40">
                                <img class="icon_32" src="<?php echo Yii::app()->baseUrl; ?>/images/Icons/Comment-light.png">

                            </div>
                        </div>
                    </div>
                    <div class="comment_rate center-child">
                        <div class="rate_bar ">
                            <div class="level_rate level_rated"></div>
                            <div class="level_rate level_rated"></div>
                            <div class="level_rate level_rated"></div>
                            <div class="level_rate level_rated"></div>
                            <div class="level_rate level_rated"></div>
                            <div class="level_rate level_rated"></div>
                            <div class="level_rate level_rated"></div>
                            <div class="level_rate level_rated"></div>
                            <div class="level_rate"></div>
                            <div class="level_rate"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comment_content">
                <img src="<?php echo Yii::app()->baseUrl; ?>/images/Article/Manila05.jpg" align="left" height="50%">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>

            </div>
        </div>*/

/*---------comment_body------------*/
.comment_person:not(:first-child), .comment_child:not(:first-child)
{
    border-top: 1px dotted #ccc;
}




.comment_person, .comment_child{
    padding: 0px 20px 20px 20px;
    display: flex;
    flex-direction:row;

    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;

    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: stretch;
    align-items: stretch;

}

.comment_child{
    margin-left: 100px;
    border-left: 10px solid #00727c;
}

.comment_child:first-child{
    margin-top: 20px;
}
.comment_owner{
    width: 150px;
    height: 150px;
}

.comment_child .comment_owner{
    width: 100px !important;
    height: 100px !important;
}

.comment_owner{
    margin-top:20px;
}

.comment_content{
    flex:1;
    margin-left: 20px;
}


.comment_details{
    display: flex;
    float: end;
}

.comment_reply{
    flex: 1 100%;
}